<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, div, ul, ol, dl, li, dt, dd, p, h1, h2, h3, h4, h5, h6, tr, td, input, textarea {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        #box {
            width: 900px;
            height: 40px;
            margin: 100px;
            float: left;
        }

        #box span {
            line-height: 40px;
            float: right;
        }

        #bar {
            width: 800px;
            height: 40px;
            background-color: #cccccc;
            border-radius: 8px;
            position: relative;
        }

        #chang_bg {
            width: 200px;
            height: 40px;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }

        #mask {
            width: 40px;
            height: 80px;
            border-radius: 8px;
            background-color: red;
            position: absolute;
            top: -20px;
            left: 200px;
        }

    </style>
</head>
<body>
<div id="box">
    <span>20%</span>
    <div id="bar">
        <div id="chang_bg"></div>
        <div id="mask"></div>
    </div>
</div>

<script>
    window.onload = function () {
        var chang_bg = document.getElementById('chang_bg');
        var bar = document.getElementById('bar');
        var mask = document.getElementById('mask');
        var box = document.getElementById('box');
        var span = box.getElementsByTagName('span')[0];

        mask.onmousedown = function (event) {
            //获得event兼容事件
            var myevent = event || window.event;
            //获得进度条的初始值
            var beginX = myevent.clientX - mask.offsetLeft;

            document.onmousemove = function (event) {/*注意function(event)里面的even要写*/
                var myevent = event || window.event;
                //获取最新
                var moveX = myevent.clientX - beginX;
                //判断mask不能出界
                if (moveX < 0) {
                    moveX = 0;
                } else if (moveX >= bar.offsetWidth - mask.offsetWidth) {
                    moveX = bar.offsetWidth - mask.offsetWidth;
                }
                //mask移动
                mask.style.left = moveX + 'px';
                chang_bg.style.width = moveX + 'px';
                //进度条与进度%对应 *100是为了转换成百分比
                //计算公式：移动的距离 / (进度条总长度-mask的宽度）
                span.innerHTML = parseInt(moveX/(bar.offsetWidth-mask.offsetWidth)*100)+'%';
            }
        }


    }
</script>
</body>
</html>